<style>
    div.order-type {

    }

    div.order-type >.box {
        float: left;
        width: 25%;
    }
    div.order-type > div.box > div.type {
        width: 90%;
        margin: 0 auto;
        border: 1px solid #EDEDED;
        height: 200px;
        background: #fff;
        margin-bottom: 10px;
    }
    div.order-type > div.box:first-child > div.type{
        margin-left:0;
    }
    div.order-type > div.box:last-child > div.type{
        margin-right:0;
    }
    div.order-type > div.box > div.type>div{
        clear: both;
        font-size:18px;
        padding:10px 0 10px 30px;
    }
    div.order-type > div.box > div.type>div>img{
        float:left;
        width: 50px;
    }
    .tips-circle{
        border-radius: 50%;width:13px;height:13px;float:left;margin:5px 5px 0 0;
    }
    .bg-huise{
        background: #BABABA;
    }
    .bg-hongse{
        background: #F75A5A;
    }
    table{
        width:98%;
        margin:0 auto;
        border-collapse:collapse;
        border:none #0066CC;
        background-color: #ffffff;
    }
    table > thead{
        font-size: 18px;
        color:#000;
    }
    table > thead td{
        padding:8px 0 8px 5px;
    }
    table > tbody{
        color:#989898;
        font-size: 15px;
    }
    table > tbody  td{
        padding:15px 0 15px 5px;
        border-bottom:1px solid #F3F3F3;
    }
    table > thead>tr > td:first-child, tbody >tr > td:first-child{
        text-align: center;
        width: 60px;
    }
</style>
<div class="order-type">
    <div class="box">
        <div class="type">
            <div><img src="static/images/待付款.svg" > <div style="float:left;padding-left:10px;font-size: 25px;margin-top:10px;">待付款</div></div>
            <div><span style="font-size:50px;">20</span> 单待处理</div>
            <div><div class="tips-circle bg-huise"></div>无新项目需要处理</div>
        </div>
    </div>
    <div class="box">
        <div class="type">
            <div><img src="static/images/待发货.svg" > <div style="float:left;padding-left:10px;font-size: 25px;margin-top:10px;">待发货</div></div>
            <div><span style="font-size:50px;">20</span> 单待处理</div>
            <div><div class="tips-circle bg-hongse"></div>有新项目需要处理</div>
        </div>
    </div>
    <div class="box">
        <div class="type">
            <div><img src="static/images/待收货.svg" > <div style="float:left;padding-left:10px;font-size: 25px;margin-top:10px;">待收货</div></div>
            <div><span style="font-size:50px;">20</span> 单待处理</div>
            <div><div class="tips-circle bg-hongse"></div>有新项目需要处理</div>
        </div>
    </div>
    <div class="box">
        <div class="type">
            <div><img src="static/images/待反馈.svg" > <div style="float:left;padding-left:10px;font-size: 25px;margin-top:10px;">待反馈</div></div>
            <div><span style="font-size:50px;">20</span> 单待处理</div>
            <div><div class="tips-circle bg-huise"></div>无新项目需要处理</div>
        </div>
    </div>
</div>
<div style="width:100%;background: #fff;height:auto;clear:both;">
    <table>
        <thead>
        <tr>
            <td>#</td>
            <td>订单编号</td>
            <td>订单内容</td>
            <td>订单状态</td>
            <td>产生日期</td>
            <td>操作人</td>
        </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>230923432942</td>
                <td>车饰品摆件</td>
                <td>待发货</td>
                <td>02/10/2017</td>
                <td>MrShun</td>
            </tr>
            <tr>
                <td>2</td>
                <td>230923432942</td>
                <td>车饰品摆件</td>
                <td>待发货</td>
                <td>02/10/2017</td>
                <td>Eric</td>
            </tr>
            <tr>
                <td>1</td>
                <td>230923432942</td>
                <td>车饰品摆件</td>
                <td>待发货</td>
                <td>02/10/2017</td>
                <td>MrShun</td>
            </tr>
            <tr>
                <td>2</td>
                <td>230923432942</td>
                <td>车饰品摆件</td>
                <td>待发货</td>
                <td>02/10/2017</td>
                <td>Eric</td>
            </tr>
            <tr>
                <td>1</td>
                <td>230923432942</td>
                <td>车饰品摆件</td>
                <td>待发货</td>
                <td>02/10/2017</td>
                <td>MrShun</td>
            </tr>
            <tr>
                <td>2</td>
                <td>230923432942</td>
                <td>车饰品摆件</td>
                <td>待发货</td>
                <td>02/10/2017</td>
                <td>Eric</td>
            </tr>
        </tbody>
    </table>
</div>